<template>
  <div>
    <c-title :hide="false" text="订单列表"></c-title>
    <van-sticky>
      <div class="order-head">
        <van-search v-model="keyWord" placeholder="搜索订单" @input="orderSearch" />
        <van-tabs :active="tabIndex" @change="onOrderChange" title-inactive-color="#888888" title-active-color="#222222">
          <block v-for="(item, index) in tabList" :key="index">
            <van-tab :title="item.name" :name="index"></van-tab>
          </block>
        </van-tabs>
      </div>
    </van-sticky>
    <div class="mb20"></div>
    <div class="order-content">
      <div v-if="tabList[tabIndex] && tabList[tabIndex].goodsList.length > 0">
        <block v-for="(item, index) in tabList[tabIndex].goodsList" :key="index">
          <ticket-goods :setItem="item" @ondetails="ondetails" @orderstateOn="orderstateOn"></ticket-goods>
        </block>
      </div>
      <div v-else>
        <van-empty description="空空如也" />
      </div>
    </div>
    <van-dialog id="van-dialog" />
  </div>
</template>
<!--packageF/orderList/orderList.wxml-->

<script>
import ticketOrderList_controller from "./ticketOrderList_controller.js";
export default ticketOrderList_controller;
</script>
<style lang="scss" scoped>
/* packageF/orderList/orderList.wxss */

/* 公共样式 */

.mb20 {
  height: 0.625rem;
  clear: both;
}

.flex-w {
  flex-wrap: wrap;
}

/* 卡片商品信息 */

.order-content {
  margin: 0 0.625rem;

  .order-item {
    background-color: #fff;
    padding: 0.8125rem 0.625rem;
    border-radius: 0.3125rem;
  }
}

.order-item .title {
  align-items: center;
}

.title-icon-bg {
  width: 1.0625rem;
  height: 1.0625rem;
  margin-right: 0.3125rem;

  img {
    width: 1.0625rem;
    height: 1.0625rem;
  }
}

.title-name {
  font-size: 0.8125rem;
  color: #222;
}

.right {
  font-size: 0.8125rem;
  color: #ff3a00;
}

.card-wrap {
  margin: 0.625rem 0 0 0;

  .img img {
    width: 5.4063rem;
    height: 5.4063rem;
    border-radius: 0.625rem;
  }
}

.card-main {
  margin: 0 0 0 0.6875rem;
  flex: 3;
  flex-direction: column;

  .name {
    font-size: 0.9375rem;
    color: #222;
  }

  .price {
    font-size: 0.6875rem;
    color: #78777d;
  }

  .num {
    text-align: right;
    font-size: 0.6875rem;
    color: #78777d;
  }

  .time {
    font-size: 0.6875rem;
    color: #ffa200;
    margin: 0.3125rem 0 0 0;
    text-align: left;
  }
}

.order-footer {
  flex-direction: column;

  .total {
    font-size: 0.875rem;
    color: #333;
    text-align: right;
  }
}

.order-btns {
  justify-content: flex-end;
  margin-top: 0.3125rem;

  .btn {
    width: 5rem;
    height: 2.0625rem;
    line-height: 2.125rem;
    text-align: center;
    border-radius: 0.3125rem;
  }

  .order-buy {
    border: solid 0.0313rem #b3b3b3;
    font-size: 0.8125rem;
    color: #222;
    margin: 0 0.375rem 0 0;
    background-image: #fff;
    cursor: pointer;
  }

  .order-evaluate {
    background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
    font-size: 0.8125rem;
    color: #fff;
    margin: 0 0.375rem 0 0;
    border: none;
  }
}

.order-buy:last-child,
.order-btns .order-evaluate:last-child {
  margin-right: 0;
}
</style>
